<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>External Libraries and Components</title>
  <link rel="stylesheet" href="https://unpkg.com/style.css">
  <style type="text/css">
    .markdown-body {
      max-width: 46em;
      margin: 2em auto;
      padding: 0 1em;
      overflow: hidden;
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <main class="markdown-body"><link id="viewx-style-style-0" rel="stylesheet" type="text/css" href="https://unpkg.com/highlight.js@9.18.1/styles/darkula.css">
<hr>
<h3>JSONX Manual</h3>
<ul>
<li><a href="https://repetere.github.io/jsonx/">Home</a></li>
<li><a href="../getting-started/index.html">Getting Started</a></li>
<li><a href="../using-advanced-props/index.html">Using Advanced Props</a></li>
<li><a href="../using-external-and-custom-components/index.html">External and Custom Components</a></li>
<li><a href="../creating-react-components-and-component-libraries/index.html">Creating React Components and Component Libraries</a></li>
<li><a href="../spec/index.html">JSONX &amp; JXM Spec</a></li>
<li><a href="../samples/index.html">Samples</a></li>
<li><a href="../roadmap/index.html">Roadmap</a></li>
<li><a href="../../index.html">Full API Docs</a></li>
</ul>
<hr>
<h1>External Libraries and Components</h1>
<p>JSONX natively supports any components from React-DOM, but for most real applications you are using either a large open-source component library (e.g. react-bootstrap, ant.design, material UI, etc) or any 3rd-party react components (like react-autocomplete). To use custom 3rd-party components or libraries they need to be assigned to JSONX’s <code>this</code> parameter.</p>
<h2>Using custom Component Libraries</h2>
<p>Using a component library is as simple as assigning the Library to the <code>this.componentLibraries</code> property, and referencing the flattened component name as the component value in your JXM JSON Object.</p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> jsonx <span class="hljs-keyword">from</span> <span class="hljs-string">'jsonx'</span>;
<span class="hljs-keyword">import</span> { * <span class="hljs-keyword">as</span> <span class="hljs-title class_">ReactBootstrap</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-bootstrap'</span>; <span class="hljs-comment">//or in the browser reference the UMD: &lt;script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin /&gt;</span>

<span class="hljs-keyword">const</span> getReactElement = jsonx.<span class="hljs-property">getReactElement</span>.<span class="hljs-title function_">bind</span>({
  <span class="hljs-attr">componentLibraries</span>:{
    <span class="hljs-title class_">ReactBootstrap</span>,
  }
});

<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>:<span class="hljs-string">'ReactBootstrap.Container'</span>, 
  <span class="hljs-attr">children</span>:[
    {
      <span class="hljs-attr">component</span>:<span class="hljs-string">'ReactBootstrap.Row'</span>, 
      <span class="hljs-attr">children</span>:[
        {
          <span class="hljs-attr">component</span>:<span class="hljs-string">'ReactBootstrap.Col'</span>,
          <span class="hljs-attr">children</span>:[
            {
              <span class="hljs-attr">component</span>:<span class="hljs-string">'ReactBootstrap.Alert'</span>,
              <span class="hljs-attr">props</span>:{ <span class="hljs-attr">variant</span>:<span class="hljs-string">'primary'</span> },
              <span class="hljs-attr">children</span>: <span class="hljs-string">'This is a Bootstrap Alert'</span>
            }
          ]
        },
        {
          <span class="hljs-attr">component</span>:<span class="hljs-string">'ReactBootstrap.Col'</span>,
          <span class="hljs-attr">children</span>:[
            {
              <span class="hljs-attr">component</span>:<span class="hljs-string">'ReactBootstrap.Spinner'</span>,
              <span class="hljs-attr">props</span>:{ <span class="hljs-attr">animation</span>:<span class="hljs-string">'border'</span>, <span class="hljs-attr">role</span>:<span class="hljs-string">'status'</span> },
            }
          ]
        }
      ], 
    }
  ], 
}

<span class="hljs-keyword">const</span> myReactElements = <span class="hljs-title function_">getReactElement</span>(<span class="hljs-variable constant_">JXM</span>);
</code></pre>
<h3>Example React Bootstrap</h3>
<table style="border:0; width:100%">
  <tbody><tr>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/gctmsojp/22/embedded/js,html/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
</td>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/gctmsojp/22/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
</td>
  </tr>
</tbody></table>
<h2>Using Custom Components</h2>
<p>If you’re only adding single components or using your components you can add them to JSONX’s component my individually. The difference between a Custom Component and a Custom Library is <code>this.reactComponents</code> expects each property value to be a react component and <code>this.componentLibraries</code> expects each property value to reference an object that has values that are React Components.</p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> jsonx <span class="hljs-keyword">from</span> <span class="hljs-string">'jsonx'</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Calendar</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'rc-calendar'</span>;
<span class="hljs-keyword">const</span> jsonxRender = jsonx.<span class="hljs-property">jsonxRender</span>.<span class="hljs-title function_">bind</span>({ 
  <span class="hljs-attr">reactComponents</span>:{
    <span class="hljs-title class_">ReactCalendar</span>: <span class="hljs-title class_">Calendar</span>,
  }
});

<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>:<span class="hljs-string">'div'</span>, 
  <span class="hljs-attr">children</span>:[
    {
      <span class="hljs-attr">component</span>:<span class="hljs-string">'h1'</span>, 
      <span class="hljs-attr">children</span>:<span class="hljs-string">'React Calendar demo'</span>,
    },
    {
      <span class="hljs-attr">component</span>:<span class="hljs-string">'ReactCalendar'</span>,
      <span class="hljs-attr">props</span>:{
      },
    }
  ], 
};

<span class="hljs-title function_">jsonxRender</span>({
  <span class="hljs-attr">jsonx</span>:<span class="hljs-variable constant_">JXM</span>, 
  <span class="hljs-attr">querySelector</span>:<span class="hljs-string">'#main'</span>,
});
</code></pre>
<h3>Example React Calendar</h3>
<table style="border:0; width:100%">
  <tbody><tr>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/Lqwe3f59/5/embedded/js,html/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
</td>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/Lqwe3f59/5/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
</td>
  </tr>
</tbody></table>
<hr>
<h2>Next: <a href="../creating-react-components-and-component-libraries/index.html">Creating React Components and Component Libraries</a></h2>
<h3>JSONX Manual</h3>
<ul>
<li><a href="https://repetere.github.io/jsonx/">Home</a></li>
<li><a href="../getting-started/index.html">Getting Started</a></li>
<li><a href="../using-external-and-custom-components/index.html">External and Custom Components</a></li>
<li><a href="../using-advanced-props/index.html">Using Advanced Props</a></li>
<li><a href="../creating-react-components-and-component-libraries/index.html">Creating React Components and Component Libraries</a></li>
<li><a href="../spec/index.html">JSONX &amp; JXM Spec</a></li>
<li><a href="../samples/index.html">Samples</a></li>
<li><a href="../roadmap/index.html">Roadmap</a></li>
<li><a href="../../index.html">Full API Docs</a></li>
</ul>
</main>


</body></html>